<template>
  <div class="list-div">
    <el-row>
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="addr">
          <el-input v-model="form.addr" placeholder="请输入地址"></el-input>
        </el-form-item>

        <el-form-item label="地图图片" prop="mapImg">
        </el-form-item>
        <el-form-item>
          <el-button class="btnAdd" type="primary" @click="submitForm('form')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-row>



  </div>

</template>

<script>
import ElRow from "element-ui/packages/row/src/row";

export default {
  components: {ElRow},
  name: 'Contacts',
  data () {
    return {
      showIconDialog:false,
      showIcon:null,
      form: {
        fileList:null,
        id:'',
        email: '',
        addr: '',
        mapImg: '',
      },
      rules: {
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { max: 50, message: '不超过 50 个字符', trigger: 'blur' }
        ],
        addr: [
          { required: true, message: '请输入地址', trigger: 'blur' },
          { max: 50, message: '不超过 50 个字符', trigger: 'blur' }
        ],
        mapImg: [
          { required: true, message: '请上传地图图片', trigger: 'blur' },
        ],
      },


    }
  },
  methods: {

    removeFile(file){
      this.form.mapImg = null
    },
    uploadSuccess(file){
      this.form.mapImg = file.url
    },
    getData(){
      this.$axios.get('/admin/contacts/info', {
        params: {
          pageNo: this.pageNo,
        }
      }).then(r => {
        let res = r.data
        if (res.code !== 1) {
          this.$message.error(res.msg)
          return
        }
        if ( res.data){
          this.form = res.data
          this.form.fileList=[]
          this.form.fileList.push({url:this.form.mapImg})
        }


      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = '/admin/contacts/edit'

          this.$axios.post(url, {
            id: this.form.id,
            email:this.form.email,
            addr:this.form.addr,
            mapImg:this.form.mapImg,
          }).then(r => {
            let  res = r.data
            this.$message.error(res.msg)
            if (res.code !== 1) {
              return
            }
            this.getData()
          })
        } else {
          return false;
        }
      });
    },

    init () {
      this.getData()
    }
  },
  mounted: function () {
  },
  created: function () {
    this.init()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

</style>
